<template>
  <!-- <CommonForm :form="selectedComponent.style" :formJson="formJson" /> -->
  <CommonForm :onChange="handleChange" :formData="selectedComponent.style" :formJson="formJson" />
  <!-- <GeometricForm /> -->
</template>

<script >
import { mapState } from "vuex"
// import GeometricForm from "./GeometricForm"
import CommonForm from "../../../../common/CommonForm/index2"
import getStyleFormJson from "../Style/style"
import EventBus from "../../../EventBus"

export default {
  data() {
    return {

    }
  },
  methods: {
    handleChange(fieldName, value){
      console.log(fieldName, value)
      // const selectedComponent = {
      //   ...this.selectedComponent,

      // }
      this.selectedComponent.style = {
          ...this.selectedComponent.style,
          [fieldName]: value
        }
      this.$store.commit("lowCode/setSelectedComponent", this.selectedComponent)
      EventBus.$emit("setSelectComponentUpdateList", {})
    },
  },
  computed: {
    ...mapState("lowCode", {
      selectedComponent: state => state.selectedComponent,
    }),
    formJson(){
      return getStyleFormJson("geometric")
    },
  },
  components: {
    CommonForm
  }
}
</script>

<style lang="less" scoped>
  @import url("./index.less");
</style>
